<template>
  <div class="cateGoryList">
    <van-search @click="searchJump" class="categoryTitle" placeholder="商品搜索共239款好物" />
    <van-sidebar v-model="activeKey" @change="cutNav" class="sideNav">
      <van-sidebar-item v-for="item in list" :key="item.id" :title="item.name"/>
    </van-sidebar>
    <div class="right">
        <div class="cateBanner">
            <img :src="list[cateIndex].banner_url" alt="">
        </div>
        <!-- 内容 -->
        <div class="category-con">
            <p class="title">-居家分类-</p>
        <ul class="cate-list clear">
            <li v-for="item in listCate" :key="item.id" @click="jumpCatelist(item.id)">
                <img :src="item.wap_banner_url" alt="">
                <p class="c-name">{{item.name}}</p>
            </li>
            <li class="item-last"></li>
            <li class="item-last"></li>
        </ul>
        </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import tabbar from "../../components/tabbar";
import { category,goodsList,currentaction,categoryNav } from "../../api/category/index";
export default {
  data() {
    return {
        activeKey:0,
        list:[{banner_url:"http://yanxuan.nosdn.127.net/92357337378cce650797444bc107b0f7.jpg"}],
        id:0,
        listCate:[],
        cateIndex:0
    };
  },
  methods: {
      jumpCatelist(id) {
          this.$router.push({path:'/pages/catedetail/main',query:{id:JSON.stringify(id)}})
        // categoryNav({id}).then(res=>{
        //     console.log(res,"我是详情数据");
        // })
      },
      searchJump() {
      this.$router.push("/pages/search/main");
    },
    init() {
      category().then((res) => {
          console.log(res);
          this.list = res.categoryList
          this.id = res.categoryList[0].id
          currentaction({id:this.id}).then(res=>{
          console.log(res);
          this.listCate = res.data.currentOne.subList
          console.log(this.listCate,"我是数据");
      })
      });
      
    //   goodsList({categoryId:1005000}).then(res=>{
    //       console.log(res);
    //   })
    //   categoryNav({id:'1008002'}).then(res=>{
    //       console.log('导航');
    //       console.log(res);
    //       console.log('导航');
    //   })
    },
    cutNav(index) {
        this.cateIndex = index
        this.id = this.list[index].id
        currentaction({id:this.id}).then(res=>{
          console.log(res);
          this.listCate = res.data.currentOne.subList
          console.log(this.listCate);
      })
    }
  },
  created() {
    this.init();
  },
  components: {
    "tab-bar": tabbar,
  },
};
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}
.categoryTitle {
    .van-field__control::-webkit-input-placeholder {
        color: #000;
    }
    padding: 8px;
    border-bottom: 1px solid #ececec;
    .van-search__content {
        position: relative;
        padding: 0;
        border-radius: 5px;
        height: 26px;
        background-color: #ededed;
        .van-cell {
            font-size: 12px;
            width: fit-content;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 0;
        }
    }
}
.sideNav {
    float: left;
    .van-sidebar-item {
        padding: 0;
        height: 45px;
        line-height: 45px;
        background-color: #fff;
    }
    .van-sidebar-item--select::before {
        height: 45px;
        width: 2px;
    }
    .van-sidebar-item--select {
        color: rgb(171,43,43);
        font-size: 18px;
    }
}

</style>
<style lang="scss" scoped>
.cateGoryList {
  height: 100vh;
  background-color: #fff;
}
.clear::after {
    display: block;
    content: '';
    clear: both;
}
.right {
    float: left;
    padding: 10px 15px;
    .cateBanner {
        width: 261px;
        height: 109px;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .category-con {
    .title {
        margin: 24px 0;
    }
    .cate-list {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        width: 261px;
        .item-last {
            height: 0;
            width: 60px;
        }
        li {
            margin: 0 8px;
            margin-bottom: 10px;
            img {
                display: block;
                width: 70px;
                height: 70px;
            }
            .c-name {
                font-size: 12px;
            }
        }
    }
    }
}
</style>
